<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="/statics/css/public.css"/>
    <link rel="stylesheet" href="/statics/css/style.css"/>
    <script type="text/javascript" src="/statics/js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type:"get",
                url:"/sys/role/queryAll",
                success:function (result) {
                    $("select").append("<option value='-1'>---请选择---</option>");
                    $.each(result,function (index,r) {
                        $("select").append("<option value='"+r.id+"'>"+r.roleName+"</option>");
                    });
                    //设置默认选中
                    var userRole = $("#userRole").val();
                    if(null !=userRole && userRole !=''){
                        $("select").val(userRole)
                    }
                }
            });
            //查询
            $("#searchButton").click(function () {
                //表单序列化
                var data = $("form").serialize();
                location.href = "/sys/user/toList?"+data;
            });
            $("a[no]").click(function () {
                //获取页码
                var no = $(this).attr("no");
                //获取form表单的参数
                var data = $("form").serialize();
                location.href="/sys/user/toList?"+data+"&pageNum="+no;
            });
            //用户查看按钮单击事件
            $("a[name='query']").click(function () {
                //ajax获取用户对象信息
                var id=$(this).attr("userid");

                $.get("/sys/user/queryById","id="+id,function (result) {
                    var birthday=result.birthday;

                    var birthdayDate=new Date(birthday);
                    var birthdayStr = birthdayDate.toLocaleDateString();
                    //加载数据
                    var genderStr="";
                    if(result.gender==1){
                        genderStr = "女";
                    }else{
                        genderStr = "男";
                    }
                    $("#userCodeSpan").html(result.userCode);
                    $("#userNameSpan").html(result.userName);
                    $("#genderSpan").html(genderStr);
                    $("#birthdaySpan").html(birthdayStr);
                    $("#userRoleSpan").html(result.role.roleName);
                    $("#phoneSpan").html(result.phone);
                    $("#addressSpan").html(result.address);
                    //显示div
                    $("#userDiv").show();
                });
            })
            //修改用户
            $("a[name='update']").click(function () {
                //获取将要修改的用户id
                var userId = $(this).attr("userid");
                location.href = "/sys/user/toUpdate?id="+userId;
            });
            //删除用户
            $("a[name='delete']").click(function () {
                //获取将要删除的用户id
                var userId = $(this).attr("userid");
                //获取用户名
                var userName = $(this).attr("username");
                if (confirm("确定要删除用户【"+userName+"】吗？")){
                    $.get("/sys/user/updateStatus","id="+userId,function (result) {
                        if (result=="success"){
                            alert("删除用户成功");
                            //刷新当前页
                            location.href = location.href;
                        }else{
                            alert("删除失败，请稍后再试！")
                        }
                    })
                }
            })
        });
    </script>
</head>
<body>
<section class="publicMian ">
    <div class="right" style="width: 100%">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面</span>
        </div>
        <div class="search">
            <form>
            <span>用户名：</span>
            <input type="text" name="userName" value="${user.userName}" placeholder="请输入用户名"/>
            <span>用户角色：</span>
            <input type="hidden" id="userRole" value="${user.userRole}">
            <select name="userRole"></select>
            <input type="button" value="查询" id="searchButton"/>
            <a href="/sys/user/toSave">添加用户</a>
            </form>
        </div>
        <!--用户-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">用户编码</th>
                <th width="20%">用户名称</th>
                <th width="10%">性别</th>
                <th width="15%">生日</th>
                <th width="10%">电话</th>
                <th width="10%">用户类型</th>
                <th width="25%">操作</th>
            </tr>
            <c:forEach var="user" items="${pageInfo.list}">
            <tr>
                <td>${user.userCode}</td>
                <td>${user.userName}</td>
                <td>
                    <c:if test="${user.gender==1}">女</c:if>
                    <c:if test="${user.gender==2}">男</c:if>
                </td>
                <td>
                    <fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/>
                </td>
                <td>${user.phone}</td>
                <td>${user.role.roleName}</td>
                <td>
                    <a name="query" userid="${user.id}"><img src="/statics/img/read.png" alt="查看" title="查看"/></a>
                    <a name="update" userid="${user.id}"><img src="/statics/img/xiugai.png" alt="修改" title="修改"/></a>
                    <a name="delete" userid="${user.id}" username="${user.userName}"><img src="/statics/img/schu.png" alt="删除" title="删除"/></a>
                </td>
            </tr>
            </c:forEach>
        </table>
        <div align="center">
            <h2>
                [
                当前第${pageInfo.pageNum}页/共${pageInfo.pages}页
                ]
                共${pageInfo.total}条记录
                <a no="1">首页</a>
                <a no="${pageInfo.pageNum-1}">上一页</a>
                <a no="${pageInfo.pageNum+1}">下一页</a>
                <a no="${pageInfo.pages}">末页</a>
            </h2>
        </div>
        <div class="providerView" id="userDiv" style="display: none">
            <p><strong>用户编号：</strong><span id="userCodeSpan"></span></p>
            <p><strong>用户名称：</strong><span id="userNameSpan"></span></p>
            <p><strong>用户性别：</strong><span id="genderSpan"></span></p>
            <p><strong>出生日期：</strong><span id="birthdaySpan"></span></p>
            <p><strong>用户电话：</strong><span id="phoneSpan"></span></p>
            <p><strong>用户地址：</strong><span id="addressSpan"></span></p>
            <p><strong>用户类别：</strong><span id="userRoleSpan"></span></p>
        </div>
    </div>
</section>
</body>
</html>
